<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/src/css/style.css?__version=9.4">
    <title>梦想抓娃娃</title>
    <script type="text/javascript">
    	var btnflag=false;
    	var toy={};
    </script>
    <script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?8ed2efe5b24e14f351f4d88ba2eb3462";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
	
</head>
<body>
	<div class="init_content" style="display: none; ">
		<div class="catchblock">
			<div class="title"><a href="javascript:history.back(-1);" class="back"></a><span>梦想抓娃娃</span></div>
			<div class='show_video'>
			      <div class='onlines'>
			        <div class='onlinenum'>
			           <span class='onlinenumber'>0人在房间</span>
			        </div>
			        <ul class='onlineuser elip'>
	
			        </ul>
			      </div>
			      <div class="chat-msg-box" id="upchat_hall">
			      	<div class="live-msg-list  clearfix" id="chat_hall"></div>
			      </div>
			      <div class="viewswitch">
			      	<span onclick="viewswitch()"><img src="src/img/qiehuanjintou.png"></span>
			      </div>
			      <div class="sound-btn addsound" onclick="playPause()">
			      	<audio src="src/img/wwj-bg1.mp3" autoplay="autoplay" preload="" loop="loop" id="bgmusic"></audio>
			      </div>
			      <div class="gamestarting none">游戏正在开始中...</div>
			      <div class="video">
			      	<canvas id="video-canvas" style="width:96%;height:100%;margin:0 auto;"></canvas>
			      </div>
			      <div class="flymsg"></div>
			</div>

			<div class="show_ctrlbox">
				<div class='show_ctrls'>
				      <div class='ctrl' style="text-align:right;"><a href="#" class="userrecordto is_loginbtn" style="background: transparent;display:inline-block;"><img  src='src/img/shijian.png'></a></div>
				      <div>
				      	<a class='ctrlstatr' href="javascript:_hmt.push(['_trackEvent', '开始游戏', 'click', '开始', 1]);">
					         <div class='ctrlstatr_money'><img src='src/img/money.png'><span class="price"></span></div>
				     	</a>
				      </div>
				      <div class='ctrl' style="text-align:left;">
				          <button id="chatbtn" class="is_loginbtn" style="background: transparent;"><img  src='src/img/liaotian.png'></button>
				          <a href="/recharge.html" class='mymoney is_loginbtn'>0</a>
				      </div>
				</div>

				 <div class='show_ctrlsed none'>
				 	 <label class="downtime"></label>
				     <div class='direction'>
				     	<button class='left'></button>
				     	<button class='up'></button>
				     	<button class='right'></button>
				     	<button class='down'></button>
				     </div>
				     <div class='go'>
				     	<button class="catch"></button>
				     </div>
				</div>
			</div>
		</div>
		<div class="showpage">
			<div class="show_list">
				<div class="swiper-tab clearFix">
			        <ul>
			            <li class="swiper-tab-item on">娃娃详情</li>
			            <li class="swiper-tab-item">中奖记录</li>
			        </ul>
			    </div>
			    <div class="swiper-container showswiper">
			        <div class="swiper-wrapper showdelt">
			            <div class="swiper-slide tab-content-1" id="wawaintro"></div>
			            <div class="swiper-slide tab-content-1" id="history" style="display: none;"></div>
			        </div>
			    </div>
			</div>
			<div class="showchatbox none">
				<div class="chatmsg"> 
					<input id="inputchat" type="text"  placeholder="请输入消息...">
					<button id="sendmsg">发送</button>
				</div>
			</div>
			<div class="sysmsgalert none">
				
			</div>
		</div>
		<div class="gorecharge none">
			<div class="gorecharge_box">
				<div class="info">你的游戏币余额不足，赶快去充值吧～</div>
				<a href="javascript:rechargecancel();" style="background:#d4d4d4;">取消</a>
				<a href="/recharge.html" onclick="_hmt.push(['_trackEvent', '房间余额不足进入充值页面', 'click', '确定充值', 1])">确定</a>
			</div>
		</div>
	</div>
	<div class="init_loading">
        <img src="src/img/page_loading.gif?v=1">
    </div>
	<div class="topalert"></div>
	<script type="text/javascript" src="src/js/jquery-1.10.1.min.js?__version=9.4"></script>
	<script type="text/javascript" src="src/js/fastclick.js?__version=9.4"></script>
	<script type="text/javascript" src="src/js/jsmpeg.js?__version=9.4"></script>
	<script type="text/javascript" src="src/js/dropload.js?__version=9.4"></script>
	<script type="text/javascript" src="src/js/init.js?__version=9.4"></script>
	<script type="text/javascript" src="src/js/catchws.js?__version=9.4"></script>
	<script type="text/javascript" src="src/js/msgws.js?__version=9.4"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script src="/src/js/share.js?__version=9.4"></script>
	<script type="text/javascript">
		$(function(){
			if(token){
			    fetchData("/OpenAPI/v1/user/info",{"token":token},function(data){
			    	if(data.error){
			    		logout();
			    	}else{
			    		user.nickname = data.nickname;
				        user.avatar = data.avatar;
				        user.coinbalance = data.coinbalance;
				        user.uid = cookieGet("uid");
				        cookieSet("coinbalance",data.coinbalance);
				        strlSocketIO._initConnect();
				        msgSocketIO._initConnect();
			    	}
			    })
			}else{
				msgSocketIO._initConnect();
			}
		})
		var direction=true;//证明，false侧面

		var player;
		function viewswitch(){
			player.source.switch();
			direction=!direction;
		}
		if ('addEventListener' in document) {  
		    document.addEventListener('DOMContentLoaded', function() {  
		        FastClick.attach(document.body);  
		    }, false);  
		}  
		var machine_id = getQueryString("machine_id");

        $('.swiper-tab li').on('click', function (e) {
            e.preventDefault();
            $(this).addClass("on").siblings().removeClass("on");
            var i=$(this).index();
            $(".showdelt .swiper-slide").eq(i).show().siblings().hide();
        });

        $(document).on("click","#chatbtn",function(){
        	if(!isLogin){
		        return;
		    }
        	$(".showchatbox").removeClass("none");
        	$("#inputchat").focus();
        })

        $(document).on("click",".result_close,.sysbutton .start",function(){
        	$(".sysmsgalert").addClass("none").html(" ");
        })

        $(document).on("click",".onlineitem",function(){
        	var uid=$(this).attr("data-uid");
        	window.location.href='/userecord.html?uid='+uid;
        })

        $(document).on("click","#sendmsg",function(){
        	if($.trim($("#inputchat").val()).length>0){
        		msgSocketIO._chatMessage($("#inputchat").val());
        	}else{
        		$(".topalert").html("发送消息不能为空").addClass("animate");
	            setTimeout(function(){
	                $(".topalert").removeClass("animate");
	            },2000)
        	}
        	
        })
        $(document).on("click",".showchatbox",function(e){
        	var target=$(e.target);
        	if(!target.is(".chatmsg *")&&!target.is(".chatmsg")){
        		$(".showchatbox").addClass("none");
        		$("#inputchat").val("");
        	}
        })


		$(function(){

			if(isLogin) {
				$(".mymoney").html(user.coinbalance);
				$(".userrecordto").attr("href","/userecord.html?uid="+cookieGet("uid")+"&&machine_id="+machine_id)
			}

			$(document).on("click",".ctrlstatr",function(){
				if(!isLogin){
			        isloginalert();
			        event.preventDefault();
			        return;
			    }else{
			    	if($(this).hasClass("dstartBg")){
			            $(".topalert").html("当前房间已经有人在玩啦").addClass("animate");
			            setTimeout(function(){
			                $(".topalert").removeClass("animate");
			            },2000)
			            return;
			        }else{
			        	$(".gamestarting").removeClass("none");
			        }
			    }
				btnflag=true;
				var data={};
                data.cmd = "start_game";
				strlSocketIO._sendMsg(JSON.stringify(data));
			})
			$(document).on("click",".left",function(){
				direction?move(2):move(0);
			})
			$(document).on("click",".up",function(){
				direction?move(1):move(2);
			})
			$(document).on("click",".right",function(){
				direction?move(3):move(1);
			})
			$(document).on("click",".down",function(){
				direction?move(0):move(3);
			})
			$(document).on("click",".catch",function(){
				var data={};
                data.cmd = "catch";
				strlSocketIO._sendMsg(JSON.stringify(data));
			})
			getMachineInfo();
		})
		function move(index){
			var data={};
                data.cmd = "move";
				data.direction =""+index+"";
				strlSocketIO._sendMsg(JSON.stringify(data));
		}
		function getMachineInfo(){
			fetchData("/OpenAPI/v1/ToyMachine/getMachineInfo",{machine_id: machine_id},function(data){
				console.log(data);
				machine = data.machine;
				toy=data.toy;
				var html="",games="";
				var imglist=data.toy;
				var gamelist=data.games;
				$(".ctrlstatr_money .price").html(imglist.price+"/次")
				_num_=imglist.price;
				if(imglist.images.length>0){
					for(var i=0;i<imglist.images.length;i++){
						html+='<img src="'+imglist.images[i]+'">'
					}
				}else{
						html+='<div style="text-align:center;font-size:16px;color:#666;padding:100px 0;">暂无娃娃详情</div>'
				}
				$("#wawaintro").html(html);
				if(gamelist.length>0){
					for(var i=0;i<gamelist.length;i++){
						games+="<div class='historyitem'>"
								+"<div class='item_mode flex' style='margin-right:10px;'><img src='"+gamelist[i]['avatar']+"'></div>"
								+"<div class='item_mode nickname'><span>"+gamelist[i]['nickname']+"</span><span style='color:#666;'>"+gamelist[i]['time_format']+"</span></div>"
								+"<div class='item_mode time flex'><a href='/playrecord.html?gameid="+gamelist[i]['game_id']+"&&machine_id="+machine_id+"'><img src='src/img/play.png'></a></div>"
								+"</div>"
					}
				}else{
					games+='<div style="text-align:center;font-size:16px;color:#666;padding:100px 0;">暂无中奖</div>'
				}
				var canvas = document.getElementById('video-canvas');
				var url = 'ws://54.65.78.95:8777/';
				var stream1 = machine_id + "_1";
				var stream2 = machine_id + "_2";
				player = new JSMpeg.Player(url, {canvas: canvas,"streams":[stream1 + "_jp",stream2 + "_jp"],poster:"src/img/bg.jpg"});
				
				$("#history").html(games);
			})
		}
		var myAudio = document.getElementById('bgmusic');
	    function playPause(){
	        if(myAudio.paused){
	            myAudio.play();
	            $(".sound-btn").addClass("addsound");
	        }else{
	            myAudio.pause();
	            $(".sound-btn").removeClass("addsound");
	        }
	    }
	    function rechargecancel(){
	    	$(".gorecharge").addClass("none");
	    	_hmt.push(['_trackEvent', '房间余额不足取消充值', 'click', '取消充值', 1])
	    }
	</script>
</body>
</html>